﻿<template>
    <div>
        <h2>名字: {{name}}</h2>
        <h2>年龄: {{age}}</h2>
        <h2>职业类型: {{job.type}}</h2>
        <h2>职业薪资: {{job.salary}}</h2>
        <hr />
        <input type="text" placeholder="姓名" v-model="userName" /><br />
        <input type="text" placeholder="年龄" v-model.number="userAge" /><br />
        <input type="text" placeholder="职业类型" v-model="userType" /><br />
        <input type="text" placeholder="职业薪资" v-model="userSal" /><br />
        <button @click="changeType(userName,userAge,userType,userSal)">修改</button>
    </div>
</template>

<script>
import {ref} from 'vue'
export default {
    name: 'App',
    setup(){
        let name = ref('我')
        let age = ref(21)
        let job = ref({
            type: '自由职业',
            salary: 1
        })
        function changeType(userName,userAge,userType,userSal){
            if(userName.length === 0){//判断没有修改
                console.log('userName,为空')
            }else{
                name.value = userName
            }
            if(userAge.length === 0){//判断没有修改
                console.log('userAge,为空')
            }else{
                age.value = userAge
            }
            if(userType.length === 0){//判断没有修改
                console.log('userType,为空')
            }else{
                job.value.type = userType
            }
            if(userSal.length === 0){//判断没有修改
                console.log('userSal,为空')
            }else{
                job.value.salary = userSal
            }
        }
        return{
            name,age,job,changeType
        }
    }
}
</script>

<style>

</style>